<!--
    🚨🚨温馨提示🚨🚨
    下面代码是程序自动生成，可能存在个别无法运行，如果无法运行，请调整下echarts版本，或者自行浏览器查看报错信息进行修复；
    下面代码分为 echarts框架代码这个代码主要用于能运行起来echarts，还有就是核心代码（用🚨🚨非常重要🚨🚨进行标注了），核心代码主要用于显示案例效果
    如果有问题请打开社区网站 https://www.makeapie.cn 添加右上角微信群/qq群进行询问
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.makeApie.cn - ECharts案例下载 - 交通方式</title>
    <!--
        🚨🚨非常重要🚨🚨：设置相对路径资源url链接
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，👉👉下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <base href="https://www.makeapie.cn/" />

    <!-- 引入刚刚下载的 ECharts 文件 和 jquery -->
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/echarts/4.8.0/files/dist/echarts.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"
    ></script>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
    </style>
    <!--
        🚨🚨非常重要🚨🚨：下面是运行案例需要的第三方脚本，如果是相对链接，下载方法看上面👆👆
        如果你需要本地使用，请下载下来，假设下面代码中有个相对路径资源 /dep/echarts/map/js/china.js，下载方法：https://www.makeapie.cn/dep/echarts/map/js/china.js
    -->
    <!--暂无第三方脚本-->
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div
      id="chart-panel"
      style="
        width: calc(100vw - 200px);
        height: calc(100vh - 200px);
        padding: 100px;
        margin: 0 auto;
      "
    ></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("chart-panel"));
      // 指定图表的配置项和数据
      var option = {};

      //=============== start ===============//
      /**
       * 🚨🚨非常重要🚨🚨
       * 下面是 网站左侧代码，核心代码
       */
      var img =
        "";

      var trafficWay = [
        {
          name: "火车",
          value: 20,
        },
        {
          name: "飞机",
          value: 10,
        },
        {
          name: "客车",
          value: 30,
        },
        {
          name: "轮渡",
          value: 40,
        },
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [115, 115],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function (params) {
                  var percent = 0;
                  var total = 0;
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== "") {
                    return (
                      "交通方式：" +
                      params.name +
                      "\n" +
                      "\n" +
                      "占百分比：" +
                      percent +
                      "%"
                    );
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 100,
                show: true,
                color: "#00ffff",
              },
            },
            // gap: 300,
          },
          padAngle: 100, //有些版本不支持
          data: data,
        },
      ];
      option = {
        backgroundColor: "#0A2E5D",
        color: color,
        title: {
          text: "交通方式",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          // x: 'left',
          data: ["火车", "飞机", "客车", "轮渡"],
          right: 340,
          bottom: 150,
          align: "right",
          textStyle: {
            color: "#fff",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      };
      //=============== end ===============//

      // 使用刚指定的配置项和数据显示图表。
      if (option && typeof option === "object") {
        myChart.setOption(option);
      }
      window.addEventListener("resize", myChart.resize);
    </script>
  </body>
</html>
